<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模块化最佳实践</title>
</head>
<body>
    <h1>模块化最佳实践</h1>

    <script type="module">
        // 一个模块只做一件事
        // bad
        export function formatDate(date) { /* ... */ }
        export function formatCurrency(amount) { /* ... */ }
        export function formatNumber(num) { /* ... */ }

        // good
        // date-utils.js
        export function formatDate(date) { /* ... */ }
        export function parseDate(str) { /* ... */ }

        // currency-utils.js
        export function formatCurrency(amount) { /* ... */ }
        export function parseCurrency(str) { /* ... */ }

        // 导出命名优先于默认导出
        // bad
        export default function foo() { /* ... */ }

        // good
        export function foo() { /* ... */ }

        // 模块的引用路径
        // bad
        import '../../../utils/date.js';

        // good
        import { formatDate } from '@/utils/date';

        // 实际应用示例
        // api/index.js
        export * from './users';
        export * from './posts';
        export * from './comments';

        // api/users.js
        export async function getUsers() {
            // ...
        }

        // api/posts.js
        export async function getPosts() {
            // ...
        }

        // 使用示例
        import { getUsers, getPosts } from './api';

        // 模块的组织结构
        // config/
        //   ├── index.js
        //   ├── database.js
        //   └── server.js

        // services/
        //   ├── index.js
        //   ├── auth.js
        //   └── user.js

        // utils/
        //   ├── index.js
        //   ├── date.js
        //   └── string.js

        // 避免循环依赖
        // bad
        // a.js
        import { b } from './b.js';
        export function a() {
            return b();
        }

        // b.js
        import { a } from './a.js';
        export function b() {
            return a();
        }

        // good
        // shared.js
        export function shared() {
            // ...
        }

        // a.js
        import { shared } from './shared.js';
        export function a() {
            return shared();
        }

        // b.js
        import { shared } from './shared.js';
        export function b() {
            return shared();
        }
    </script>
</body>
</html> 